<template>
  <div class="css-generator-page">
    <div class="generator-container">
      <h1>快速生成CSS样式</h1>
      
      <div class="content-wrapper">
        <div class="preview-area">
          <div class="preview-box" ref="previewBox" :style="generatedStyles">
            预览效果
          </div>
          <div class="style-controls">
            <el-form :model="styleOptions" label-position="top">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="背景颜色">
                    <el-color-picker v-model="styleOptions.backgroundColor" show-alpha></el-color-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="文字颜色">
                    <el-color-picker v-model="styleOptions.color" show-alpha></el-color-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="边框颜色">
                    <el-color-picker v-model="styleOptions.borderColor" show-alpha></el-color-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="边框宽度">
                    <el-input-number v-model="styleOptions.borderWidth" :min="0" :max="20"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="圆角">
                    <el-input-number v-model="styleOptions.borderRadius" :min="0" :max="50"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="阴影">
                    <el-slider v-model="styleOptions.boxShadow" :min="0" :max="20"></el-slider>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="透明度">
                    <el-slider v-model="styleOptions.opacity" :min="0" :max="100" :step="1"></el-slider>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="字体大小">
                    <el-input-number v-model="styleOptions.fontSize" :min="12" :max="72"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="字体粗细">
                    <el-select v-model="styleOptions.fontWeight">
                      <el-option label="正常" value="normal"></el-option>
                      <el-option label="加粗" value="bold"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>

        <div class="code-area">
          <el-input
            type="textarea"
            :rows="10"
            v-model="generatedCode"
            readonly
            class="code-output"
          ></el-input>
          <div class="button-group">
            <el-button type="primary" @click="copyCode">
              <el-icon><DocumentCopy /></el-icon>
              复制代码
            </el-button>
            <el-button type="warning" @click="resetStyles">
              <el-icon><RefreshLeft /></el-icon>
              重置样式
            </el-button>
            <el-button @click="returnToHome">
              <el-icon><Back /></el-icon>
              返回首页
            </el-button>
          </div>
        </div>
      </div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>调整左侧控制面板的各项参数</li>
          <li>实时预览样式效果</li>
          <li>自动生成对应的CSS代码</li>
          <li>支持颜色、边框、阴影等样式设置</li>
          <li>可一键复制生成的代码</li>
          <li>支持样式重置功能</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { DocumentCopy, RefreshLeft, Back } from '@element-plus/icons-vue'
import { copyText } from '@/utils/clipboard'

const router = useRouter()

const styleOptions = ref({
  backgroundColor: '#ffffff',
  color: '#333333',
  borderColor: '#dddddd',
  borderWidth: 1,
  borderRadius: 4,
  boxShadow: 2,
  opacity: 100,
  fontSize: 16,
  fontWeight: 'normal'
})

const generatedStyles = computed(() => ({
  backgroundColor: styleOptions.value.backgroundColor,
  color: styleOptions.value.color,
  border: `${styleOptions.value.borderWidth}px solid ${styleOptions.value.borderColor}`,
  borderRadius: `${styleOptions.value.borderRadius}px`,
  boxShadow: styleOptions.value.boxShadow > 0 ? `0 ${styleOptions.value.boxShadow}px ${styleOptions.value.boxShadow * 2}px rgba(0,0,0,0.1)` : 'none',
  opacity: styleOptions.value.opacity / 100,
  fontSize: `${styleOptions.value.fontSize}px`,
  fontWeight: styleOptions.value.fontWeight
}))

const generatedCode = computed(() => {
  const styles = generatedStyles.value
  return `.your-class {
  background-color: ${styles.backgroundColor};
  color: ${styles.color};
  border: ${styles.border};
  border-radius: ${styles.borderRadius};
  box-shadow: ${styles.boxShadow};
  opacity: ${styles.opacity};
  font-size: ${styles.fontSize};
  font-weight: ${styles.fontWeight};
}`
})

const copyCode = () => {
  copyText(generatedCode.value)
}

const resetStyles = () => {
  styleOptions.value = {
    backgroundColor: '#ffffff',
    color: '#333333',
    borderColor: '#dddddd',
    borderWidth: 1,
    borderRadius: 4,
    boxShadow: 2,
    opacity: 100,
    fontSize: 16,
    fontWeight: 'normal'
  }
  ElMessage.success('样式已重置')
}

const returnToHome = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.css-generator-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .generator-container {
    max-width: 1200px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .content-wrapper {
      display: flex;
      gap: 30px;
      margin-bottom: 30px;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .preview-area {
        flex: 1;
        
        .preview-box {
          width: 100%;
          height: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          transition: all 0.3s ease;
        }

        .style-controls {
          background-color: #f8fafc;
          padding: 20px;
          border-radius: 12px;
        }
      }

      .code-area {
        flex: 1;

        .code-output {
          margin-bottom: 20px;
          font-family: 'Monaco', 'Courier New', monospace;

          :deep(.el-textarea__inner) {
            font-family: inherit;
            background-color: #f8fafc;
            border-color: #dcdfe6;
            
            &:focus {
              border-color: #409EFF;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }
          }
        }

        .button-group {
          display: flex;
          gap: 10px;
          justify-content: center;

          .el-button {
            display: flex;
            align-items: center;
            gap: 6px;
          }

          @media (max-width: 768px) {
            flex-direction: column;

            .el-button {
              width: 100%;
            }
          }
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
      }

      ul {
        margin: 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .css-generator-page {
    padding: 10px;

    .generator-container {
      padding: 15px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .content-wrapper {
        gap: 15px;
      }

      .notes {
        padding: 15px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style> 